<template>
  <div class="homePage">
    <header class="header">
      <div class="route" @click="go('/home')"></div>
    </header>
    <div class="content">
      <template v-if="state.tabActive === 'forecast'">
        <Forecast />
      </template>
      <template v-if="state.tabActive === 'warning'">
        <Warning />
      </template>
      <template v-if="state.tabActive === 'oneMap'">
        <OneMap />
      </template>
      <template v-if="state.tabActive === 'simulationPreview'">
        <SimulationPreview />
      </template>
      <template v-if="state.tabActive === 'emergencyPlan'">
        <EmergencyPlan />
      </template>
      <div class="wrapBG"></div>
    </div>
    <ul class="tabPane">
      <li @click="handleChangeTab('forecast')">
        <div
          class="baseIcon yu-bao-icon"
          :class="{ 'yu-bao-a': state.tabActive === 'forecast' }"
        ></div>
        <h3 class="name">预报</h3>
      </li>
      <li @click="handleChangeTab('warning')">
        <div
          class="baseIcon yu-jing-icon"
          :class="{ 'yu-jing-a': state.tabActive === 'warning' }"
        ></div>
        <h3 class="name">预警</h3>
      </li>
      <li @click="handleChangeTab('oneMap')">
        <div
          class="baseIcon zong-lan-icon"
          :class="{ 'zong-lan-a': state.tabActive === 'oneMap' }"
        ></div>
        <h3 class="name">总览</h3>
      </li>
      <li @click="handleChangeTab('simulationPreview')">
        <div
          class="baseIcon yu-yan-icon"
          :class="{ ' yu-yan-a': state.tabActive === 'simulationPreview' }"
        ></div>
        <h3 class="name">预演</h3>
      </li>
      <li @click="handleChangeTab('emergencyPlan')">
        <div
          class="baseIcon yu-an-icon"
          :class="{ 'yu-an-a': state.tabActive === 'emergencyPlan' }"
        ></div>
        <h3 class="name">预案</h3>
      </li>
    </ul>
    <div class="left_decorate"></div>
    <div class="right_decorate"></div>
    <div class="bottom_decorate"></div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { useGo } from "@gui-pkg/hooks";
import Forecast from "./forecast";
import Warning from "./warning";
import OneMap from "./oneMap";
import SimulationPreview from "./simulationPreview";
import EmergencyPlan from "./emergencyPlan";

defineOptions({ name: "HomePage" });

const go = useGo();
const state = reactive({
  tabActive: "oneMap",
});

const handleChangeTab = (tab) => {
  state.tabActive = tab;
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.homePage {
  width: 100%;
  height: 100%;
  position: relative;
  background: #232630;
  .content {
    width: 100%;
    height: 100%;
    position: relative;
    .wrapBG {
      width: 100%;
      height: 100%;
      background: url(@/assets/images/bg.png) no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      z-index: 100;
      pointer-events: none;
    }
  }
  ul.tabPane {
    width: 560px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    position: absolute;
    bottom: 30px;
    left: 50%;
    z-index: 1000;
    transform: translateX(-50%);
    li {
      width: 96px;
      height: 96px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      pointer-events: auto;
      position: relative;
      .baseIcon {
        width: 96px;
        height: 80px;
        display: flex;
        justify-content: center;
        position: absolute;
        top: 0px;
      }
      .yu-bao-icon {
        background: url(@/assets/images/nav/yu-bao.png) no-repeat;
        background-size: contain;
      }
      .yu-jing-icon {
        background: url(@/assets/images/nav/yu-jing.png) no-repeat;
        background-size: contain;
      }
      .zong-lan-icon {
        background: url(@/assets/images/nav/zong-lan.png) no-repeat;
        background-size: contain;
      }
      .yu-yan-icon {
        background: url(@/assets/images/nav/yu-yan.png) no-repeat;
        background-size: contain;
      }
      .yu-an-icon {
        background: url(@/assets/images/nav/yu-an.png) no-repeat;
        background-size: contain;
      }
      .yu-bao-a {
        width: 118px;
        height: 98px;
        background: url(@/assets/images/nav/yu-bao-a.png) no-repeat;
        background-size: contain;
      }
      .yu-jing-a {
        width: 118px;
        height: 98px;
        background: url(@/assets/images/nav/yu-jing-a.png) no-repeat;
        background-size: contain;
      }
      .zong-lan-a {
        width: 118px;
        height: 98px;
        background: url(@/assets/images/nav/zong-lan-a.png) no-repeat;
        background-size: contain;
      }
      .yu-yan-a {
        width: 118px;
        height: 98px;
        background: url(@/assets/images/nav/yu-yan-a.png) no-repeat;
        background-size: contain;
      }
      .yu-an-a {
        width: 118px;
        height: 98px;
        background: url(@/assets/images/nav/yu-an-a.png) no-repeat;
        background-size: contain;
      }
      h3.name {
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 2px;
        color: #fff;
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-40%);
        z-index: 1000;
      }
    }
  }
  header.header {
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%);
    width: 3000px;
    height: 92px;
    background: url("@/assets/images/headerBG2.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    .route {
      width: 238px;
      height: 42px;
      position: absolute;
      top: 75px;
      background: url(@/assets/images/router2.png) no-repeat;
      background-size: contain;
      pointer-events: auto;
      cursor: pointer;
    }
  }
  .left_decorate {
    width: 98px;
    height: 1018px;
    background: url(@/assets/images/left_decorate.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 32px;
    left: 0px;
    z-index: 222;
    pointer-events: none;
  }
  .right_decorate {
    width: 98px;
    height: 1018px;
    background: url(@/assets/images/right_decorate.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 56px;
    right: 0px;
    z-index: 222;
    pointer-events: none;
  }
  .bottom_decorate {
    width: 3000px;
    height: 68px;
    background: url(@/assets/images/bottom_decorate.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0;
    z-index: 100;
    pointer-events: none;
  }
}
</style>
